// 订货单

<template>
  <view>
    <!-- tabs -->
    <u-tabs
      class="tabs"
      height="100"
      active-color="#FE492F"
      :is-scroll="false"
      :list="list"
      :current="current"
      @change="tabsChange"
    ></u-tabs>
    <!-- 商品 -->
    <view class="goods-box">
      <view class="goods-item" v-for="item in orderList" :key="item.id">
        <view class="item-header">
          <text>订单号：{{ item.order_num }}</text>
          <text>{{ item.statusName }}</text>
        </view>
        <view
          class="item-top"
          @tap="toDetail(item1.goods_id)"
          v-for="(item1, index1) in item.goods_list"
          :key="item1.id"
        >
          <view class="item-img">
            <image :src="item1.goods_image" />
          </view>
          <view class="item-info">
            <view class="item-title">{{ item1.goods_name }}</view>
            <view class="item-attr-number">
              <text>
                {{ item1.unit_name + (item1.attr_name ? '; ' : '') }}{{ item1.attr_name }}
              </text>
              <text>x{{ item1.number }}</text>
            </view>
            <view class="item-price">
              <view class="price-box">
                <template v-if="item1.price !== '' && bind == 1 && priceStatus">
                  <text class="price1">￥</text>
                  <text class="price2">{{ item1.price }}</text>
                  <text class="digit">.{{ item1.decimal }}</text>
                </template>
              </view>
              <view
                v-if="item.hasMore && index1 === item.goods_list.length - 1"
                class="more"
                :class="item.showMore ? 'more-open' : ''"
                @tap.stop="showMore(item)"
              ></view>
            </view>
          </view>
        </view>
        <view class="item-count">
          <view class="item-count-number">商品总数：{{ item.number }}</view>
          <view class="item-count-money" v-if="bind == 1 && priceStatus">
            订单金额：<text>￥{{ item.order_price }}.{{ item.decimal }}</text>
          </view>
        </view>
        <view class="item-bottom" :class="item.statusClass">
          <view class="item-createtime">{{ item.createtime_text }}</view>
          <view class="examin-btn-box">
            <view
              class="item-btn"
              v-if="item.statusName === '待审核' && openPay && item.pay_status != 1"
              @tap="goPay(item.order_num)"
            >
              去支付
            </view>
            <view
              class="item-btn"
              v-if="item.statusName === '待审核' && item.pay_status != 1"
              @tap="cancelOrder(item.order_num)"
            >
              取消订单
            </view>
          </view>

          <view class="status-confirm-box" v-if="item.statusName === '待收货'">
            <view class="item-btn" @tap="getStatus(item)" v-if="item.diver_type == 1">
              查看状态
            </view>
            <view class="item-btn" @tap="confirmReceipt(item.order_num)"> 确认收货 </view>
          </view>
        </view>
      </view>
    </view>
    <dht-empty v-if="noData" type="no_order"></dht-empty>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      // 空白页
      noData: false,
      // 全部=''，0=待审核,1=已审核,2=待发货,3=待收货,4=已收货,5=退款中,6=退款完成,7=交易取消,8=交易完成
      list: [
        { name: '全部订单' },
        { name: '待审核' },
        { name: '待发货' },
        { name: '待收货' },
        { name: '已收货' }
      ],
      current: 0,
      orderList: [],
      bind: '',
      // 分页
      page: 1,
      openPay: false
    }
  },
  onReachBottom() {
    this.page++
    this.getOrderList()
  },
  onLoad(options) {
    this.current = Number(options.current)
    this.getOrderList()
    this.isOpenPay()
  },
  onShow() {
    const userInfo = uni.getStorageSync('userInfo')
    this.bind = userInfo.binding
  },
  methods: {
    // 显示更多
    showMore(item) {
      item.showMore ? (item.goods_list = item.signal_list) : (item.goods_list = item.more_list)
      item.showMore = !item.showMore
    },
    // 去支付
    async goPay(order_num) {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      const res = await this.$http.post('/api/kuyou/order/index/wxpay', {
        order_num
      })
      uni.hideLoading()
      if (res.code == 200) {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: res.data.config.timeStamp,
          nonceStr: res.data.config.nonceStr,
          package: res.data.config.package,
          signType: res.data.config.signType,
          paySign: res.data.config.paySign,
          success: (result) => {
            uni.showToast({
              title: '支付成功',
              icon: 'success',
              mask: true
            })
            this.page = 1
            this.orderList = []
            this.getOrderList()
          },
          fail: (error) => {
            uni.showToast({
              title: '支付失败',
              icon: 'error',
              mask: true
            })
          }
        })
      }
    },
    // 是否开启支付
    async isOpenPay() {
      const res = await this.$http.post('/api/kuyou/order/config/getSet', {
        name: 'pay_status'
      })
      if (res.code == 200 && res.data == 1) {
        this.openPay = true
      }
    },
    // 查看物流状态
    getStatus(item) {
      console.log('查看的订单', item)

      uni.setStorageSync('logDetail', item)
      uni.navigateTo({
        url: `/pages/my/order/logistics`
      })
    },
    // 前往商品详情页
    toDetail(id) {
      uni.navigateTo({ url: `/pages/home/homeGoods/goodsDetail?id=${id}` })
    },
    // tabs 改变
    tabsChange(e) {
      this.current = e
      this.page = 1
      this.orderList = []
      this.getOrderList()
    },
    // 获取订单列表
    async getOrderList() {
      let status = ''
      switch (this.current) {
        case 0:
          status = ''
          break
        case 1:
          status = 0
          break
        case 2:
          status = 2
          break
        case 3:
          status = 3
          break
        case 4:
          status = 4
          break
        default:
          break
      }
      const res = await this.$http.post('/api/kuyou/order/index/getOrderList', {
        page: this.page,
        status
      })
      if (res.code == 200) {
        res.data.list.map((item) => this.getStatusName(item))
        res.data.list.forEach((item) => {
          item.number = 0
          item.goods_list.forEach((item1) => {
            item1.goods_image = item1.goods_image.startsWith('http')
              ? item1.goods_image
              : this.$baseURL + item1.goods_image

            item.number += Number(item1.number)
          })

          if (item.goods_list.length > 1) {
            item.hasMore = true
            item.showMore = false
            item.signal_list = item.goods_list.slice(0, 1)
            item.more_list = JSON.parse(JSON.stringify(item.goods_list))
            item.goods_list = item.goods_list.slice(0, 1)
          } else {
            item.hasMore = false
          }

          item.createtime_text = this.formatTime(item.createtime)
        })
        this.orderList = [...this.orderList, ...res.data.list]
        this.noData = !this.orderList.length
      }
    },
    formatTime(timestamp) {
      const date = new Date(timestamp * 1000)
      const Y = date.getFullYear()

      let M = date.getMonth() + 1
      M = M < 10 ? '0' + M : M

      let D = date.getDate()
      D = D < 10 ? '0' + D : D

      let h = date.getHours()
      h = h < 10 ? '0' + h : h

      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m

      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s

      return `${Y}-${M}-${D} ${h}:${m}:${s}`
    },
    // 获取状态名称
    getStatusName(item) {
      let statusName = ''
      let statusClass = ''
      switch (item.status) {
        case 0:
          statusName = '待审核'
          statusClass = 'status1'
          break
        case 1:
          statusName = '已审核'
          statusClass = 'status2'
          break
        case 2:
          statusName = '待发货'
          statusClass = 'status3'
          break
        case 3:
          statusName = '待收货'
          statusClass = 'status4'
          break
        case 4:
          statusName = '已收货'
          break
        case 5:
          statusName = '退款中'
          break
        case 6:
          statusName = '退款完成'
          break
        case 7:
          statusName = '交易取消'
          break
        case 8:
          statusName = '交易完成'
          break
        default:
          break
      }
      item.statusName = statusName
      item.statusClass = statusClass
    },
    // 取消订单
    cancelOrder(orderNum) {
      uni.showModal({
        title: '提示',
        content: '是否确认取消订单？',
        success: async ({ confirm }) => {
          if (confirm) {
            const res = await this.$http.post('/api/kuyou/order/index/cancelOrder', {
              order_num: orderNum
            })
            if (res.code == 200) {
              this.page = 1
              this.orderList = []
              this.getOrderList()
              uni.showToast({
                title: '取消订单成功',
                icon: 'success'
              })
            }
          }
        }
      })
    },
    // 确认收货
    confirmReceipt(orderNum) {
      uni.showModal({
        title: '提示',
        content: '是否确认收货？',
        success: async ({ confirm }) => {
          if (confirm) {
            const res = await this.$http.post('/api/kuyou/order/index/receiving', {
              order_num: orderNum
            })
            if (res.code == 200) {
              this.page = 1
              this.orderList = []
              this.getOrderList()
              uni.showToast({
                title: '确认收货成功',
                icon: 'success'
              })
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState(['priceStatus'])
  }
}
</script>

<style>
page {
  padding: 100rpx 0;
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
// tabs
.tabs {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

// 商品
.goods-box {
  .goods-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20rpx auto;
    width: 702rpx;
    background: #ffffff;
    border-radius: 12rpx;
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #666666;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .item-top {
      display: flex;
      align-items: flex-start;
      margin-top: 40rpx;
      padding: 0 24rpx;
      &:first-child {
        margin-top: 0;
      }
      .item-img {
        display: flex;
        align-items: center;
        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 12rpx;
        }
      }
      .item-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 200rpx;
        margin-left: 20rpx;
        padding: 8rpx 0;
        width: 100%;
        .item-title {
          color: #111111;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .item-attr-number {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          font-weight: 500;
          color: #999999;
          line-height: 16px;
        }
        .item-price {
          display: flex;
          justify-content: space-between;
          .price-box {
            // display: flex;
            // justify-content: center;
            // align-items: center;
            .price1 {
              font-size: 24rpx;
              color: #fe3d23;
              font-weight: 600;
            }
            .price2 {
              font-size: 30rpx;
              color: #fe3d23;
              font-weight: 600;
            }
            .digit {
              font-size: 24rpx;
              color: #fe3d23;
              font-weight: 600;
            }
          }
          .more {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32rpx;
            height: 32rpx;
            border: 1px solid #fe492f;
            border-radius: 50%;
            &::before {
              content: '';
              display: inline-block;
              width: 10rpx;
              height: 10rpx;
              margin-top: -20%;
              border-left: 1px solid #fe492f;
              border-bottom: 1px solid #fe492f;
              transform: rotate(-45deg);
            }
            &.more-open {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
    .item-count {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #333333;
      .item-count-number {
      }
      .item-count-money {
        margin-left: 48rpx;
        text {
          font-weight: 800;
          color: #ff1100;
        }
      }
    }
    .item-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;
      padding: 24rpx 24rpx 0;
      height: 56rpx;
      font-size: 24rpx;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      .item-createtime {
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;
      }
      // 待收货
      .status-confirm-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .item-btn {
          &:first-child {
            margin-right: 12rpx;
            color: #333333;
            border: 1px solid #ccc;
          }
        }
      }
      .item-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 40rpx;
        height: 56rpx;
        border-radius: 30rpx;
      }
      // 待审核
      .examin-btn-box {
        display: flex;
        .item-btn {
          &:first-child {
            margin-right: 12rpx;
            border: 1px solid #f74444;
            color: #fe492f;
          }
        }
      }
      &.status1 {
        color: #fe492f;
        .item-btn {
          color: #333333;
          border: 1px solid #ccc;
        }
      }
      &.status2 {
        color: #00a95b;
      }
      &.status3,
      &.status4 {
        color: #333;
        .item-btn {
          border: 1px solid #f74444;
          color: #fe492f;
        }
      }
    }
  }
}
</style>
